/**
* 分页组件
*/ 
<template>
  <el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="childMsg.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="childMsg.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="childMsg.total">
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination',
  props: ['childMsg'],
  data() {
    return {
      pageparm: {
        currentPage: 3,//默认第一页
        pageSize:60,//显示20条
        total:''
      }
    }
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      // 每页多少条
      this.pageparm.size = val
      console.log(this.pageparm.size,'每页多少条')
      this.$emit('callFather', this.pageparm)
    },
    handleCurrentChange(val) {
      // 当前页多少条
      console.log(this.pageparm.p,'当前页多少条')
      this.pageparm.p = val
      this.$emit('callFather', this.pageparm)
    }
  }
}
</script>

<style scoped>
.page-box {margin: 10px auto;}
/deep/ .el-input__inner{height:28px;font-size: 12px;text-indent: 0em;}
/deep/ .el-pagination__sizes .el-input .el-input__inner:hover{border: 1px solid #DCDFE6 !important;}
/deep/ .el-select .el-input__inner:focus{border:1px solid #DCDFE6;}
/deep/ .el-select .el-input.is-focus .el-input__inner{border: 1px solid #DCDFE6;}
</style>
